<template>
  <view class="content">
    <tnNotify ref="notifyRef" />
    <!-- 新增主类 -->
    <view class="add-box">
      <view class="label">新建分类</view>
      <input type="text" v-model.trim="categoryData.parent_name" placeholder="在此创建新的一级分类">
      <TnButton v-if="categoryData.parent_name" click-modifiers="stop" text plain @click="toCreateCategory">保存</TnButton>
    </view>
    <view class="ledger-box tn-mt-sm" v-for="ledger in ledgerData.list">
      <view class="parent tn-flex-start-between tn-mr-lg">
        <TnTitle :title="ledger.category_name" mode="vLine" color="tn-red" />
        <TnIcon name="edit" @click="toEditLedger(ledger)" />
      </view>
      <view v-for="ch in ledger.children" class="children">
        <TnListItem height="30" @click="toEditLedger(ch)">{{ ch.category_name }}</TnListItem>
      </view>
    </view>
    
    <TnPopup v-model="showPopupAction" close-btn width="90%">
      <view class="popup-box tn-p-xs">
        <TnTitle title="编辑分类" mode="vLine"></TnTitle>
        <view class="form">
          <view class="form-row">
            <view class="label">
              名称
            </view>
            <view class="value">
              <input type="text" v-model.trim="categoryData.category_name" placeholder="请输入分类名称" />
            </view>
          </view>
          <view class="tn-flex-end-end">
            <TnButton click-modifiers="stop" type="danger" @click="toDeleteCategory">删除</TnButton>
            <view class="tn-mr"></view>
            <TnButton click-modifiers="stop" type="primary" @click="toSaveCategory">确定</TnButton>
          </view>
        </view>
        <view v-if="!categoryData.parent_id" class="tn-border-top tn-pt-sm">
          <TnTitle title="新建子分类" mode="dot" color="tn-red"></TnTitle>
          <view class="form">
            <view class="form-row">
              <view class="label">
                子类别
              </view>
              <view class="value">
                <input type="text" v-model.trim="categoryData.child_name" placeholder="输入子类别的名称" />
              </view>
            </view>
            <view class="tn-flex-end-end">
              <TnButton click-modifiers="stop" type="primary" @click="toCreateCategory">确定</TnButton>
            </view>
          </view>
        </view>
      </view>
    </TnPopup>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { callCloudFunction } from '@/utils/cloudfunc';
  
  import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
  import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
  import TnListItem from '@/uni_modules/tuniaoui-vue3/components/list/src/list-item.vue'
  import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
  import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
  import tnNotify from '@/uni_modules/tuniaoui-vue3/components/notify/src/notify.vue'
  
  const showPopupAction = ref(false)
  const ledgerData = reactive({
    list: []
  })
  
  const categoryData = reactive({
    _id: '',
    parent_id: '',
    category_name: '',
    child_name: '',
    parent_name: '',
  })
  // 通知
  const notifyRef = ref(null)
  
  
  onLoad(() => {
    getLedgerTree()
  })
  
  const getLedgerTree = () => {
    callCloudFunction({
      name: 'ume-ledger',
      data: {action: 'userRetrieveTree'}
    }).then(res => {
      // console.log('res', res);
      ledgerData.list = res.ledger
    })
  }
  
  const toEditLedger = (category) => {
    categoryData._id = category._id
    categoryData.parent_id = category.parent_id
    categoryData.category_name = category.category_name
    showPopupAction.value = true
    // uni.navigateTo({
    //   url: '/pages/account/category/editor?_id=' + _id
    // })
  }
  
  const toSaveCategory = () => {
    callCloudFunction({
      name: 'ume-ledger',
      data: { action: 'userUpdate', _id: categoryData._id, 'category_name': categoryData.category_name}
    }).then(res => {
      // console.log(res);
      showPopupAction.value = false
      notifyRef.value?.show({
        msg: res.message,
        type: res._id ? 'success' : 'danger'
      })
      if (res._id) {
        getLedgerTree()
      }
    })
  }
  
  const toCreateCategory = () => {
    const cData = {
      parent_id: categoryData.child_name ? categoryData._id : '',
      category_name: categoryData.child_name ? categoryData.child_name : categoryData.parent_name
    }
    callCloudFunction({
      name: 'ume-ledger',
      data: {action: 'userCreate', ledger_data: cData}
    }).then(res => {
      showPopupAction.value = false
      categoryData.child_name = ''
      categoryData.parent_name = ''
      // console.log('res:', res);
      notifyRef.value?.show({
        msg: res.message,
        type: 'success'
      })
      getLedgerTree()
    })
  }
  
  const toDeleteCategory = () => {
    callCloudFunction({
      name: 'ume-ledger',
      data: {action: 'userDelete', _id: categoryData._id}
    }).then(res => {
      console.log(res);
      showPopupAction.value = false
      notifyRef.value?.show({
        msg: res.message,
        type: res._id ? 'success' : 'danger'
      })
      if (res._id) {
        getLedgerTree()
      }
    })
  }
  
</script>

<style lang="scss">
  .content {
    .add-box {
      display: flex;
      align-items: center;
      padding: 0 10rpx;
      background-color: #e8dfc4;
      .label {
        font-size: 26rpx;
        margin-right: 20rpx;
        font-weight: 700;
      }
      input {
        height: 60rpx;
        color: #41a863;
        flex: 1;
      }
    }
    .popup-box {
      .form {
        padding: 20rpx;
        .form-title {
          line-height: 100rpx;
          font-size: 38rpx;
          font-weight: 700;
        }
        .form-row {
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 80rpx;
          margin-bottom: 20rpx;
          border-bottom: 1px solid #eee;
          .label {
            width: 130rpx;
            display: flex;
            align-items: center;
            flex-direction: row;
            color: #555;
            font-weight: 700;
          }
          .value {
            margin-left: 20rpx;
            width: 100%;
            height: 60rpx;
            input {
              height: 60rpx;
              color: #007aff
            }
          }
        }
      }

    }
  }
</style>